<template>
	<view class="container">
		<view class="topSteps"><u-steps mode="number" :list="numList" active-color="#FA8513" :current="currentStep"></u-steps></view>
		<u-gap style="margin-top:20upx;" height="10" bg-color="#f1f1f1"></u-gap>
		<view class="content">
			<view class="contentA" :style="isShowA">
				<u-form :model="aform" ref="formA">
					<u-form-item label="手机号码" prop="phoneNumber" :label-width="150" :required="true">
						<u-input v-model="aform.phoneNumber" placeholder="请输入手机号码" type="cell" />
					</u-form-item>
					<u-form-item label="验证码" prop="code" :label-width="150" :required="true">
						<u-input v-model="aform.code" placeholder="请输入验证码" type="cell" />
						<u-verification-code
							:keep-running="true"
							:seconds="seconds"
							@end="end"
							@start="start"
							ref="uCode"
							@change="codeChange"
							:startText="startText"
							:changeText="changeText"
							:endText="endText"
						></u-verification-code>
						<u-button @click="getCode">{{ tips }}</u-button>
					</u-form-item>
					<!-- 提交 -->
					<view class="submit"><u-button type="warning" ripple @click="submitA">提交下一步</u-button></view>
					<view class="ysxy">
						<u-checkbox-group>
							<u-checkbox style="display: inline-flex;" shape="circle" v-model="ysxy.checked" @change="checkboxChange" name="1">
								<view style="display: flex;">
									我同意
									<router-link style="color:#ff0000" to="{name: sjdprivacy}">服务条款</router-link>
								</view>
							</u-checkbox>
						</u-checkbox-group>
					</view>
				</u-form>
			</view>
			<view class="contentB" :style="isShowB">
				<u-form :model="bform" ref="formB">
					<u-form-item label="个人头像" prop="avatar" :label-width="150" :required="true"><u-avatar :src="bform.avatar"></u-avatar></u-form-item>
					<u-form-item label="真实姓名" prop="realName" :label-width="150" :required="true">
						<u-input v-model="bform.realName" placeholder="请输入真实姓名" type="cell" />
					</u-form-item>
					<u-form-item label="身份证正面" label-position="top" prop="phoneNumber" :label-width="150" :required="true">
						<u-upload ref="fUpload" :action="upload.frontaction" :file-list="upload.front" :max-count="1"></u-upload>
					</u-form-item>
					<u-form-item label="身份证反面" label-position="top" prop="phoneNumber" :label-width="150" :required="true">
						<u-upload ref="bUpload" :action="upload.frontaction" :file-list="upload.back" :max-count="1"></u-upload>
					</u-form-item>
					<u-form-item label="联系电话" prop="phoneNumber" :label-width="150" :required="true">
						<u-input v-model="aform.phoneNumber" placeholder="请输入联系电话" type="cell" />
					</u-form-item>
					<view class="submit"><u-button type="warning" ripple @click="submitB">提交下一步</u-button></view>
				</u-form>
			</view>
			<view class="contentC" :style="isShowC">
				<u-form :model="cform" ref="formC">
					<u-form-item label="城 市" :label-width="150" :required="true">
						<u-input type="select" v-model="showcitypickerinput" placeholder="选择城市" @click="showcitypicker = true" disabled="" input-align="left" />
					</u-form-item>
					<u-form-item label="详细地址" prop="address" :label-width="150" :required="true">
						<u-input v-model="cform.address" placeholder="请输入详细地址" type="cell" />
					</u-form-item>
					<view class="submit"><u-button type="warning" ripple @click="submitC">提交下一步</u-button></view>
				</u-form>
			</view>
			<view class="contentD" :style="isShowD">
				<view class="tags">
					<u-tag
						class="tag"
						v-for="(item, index) in serviceItem"
						:key="index"
						:index="index"
						:text="item.text"
						:show="true"
						:bg-color="item.bgcolor"
						:border-color="item.bordercolor"
						color="#ffffff"
						@click="tagclick"
					/>
				</view>
				<u-form :model="dform" ref="formD">
					<view class="submit"><u-button type="warning" ripple @click="submitD">提交</u-button></view>
				</u-form>
			</view>
		</view>
		<view><city-select v-model="showcitypicker" @city-change="cityChange"></city-select></view>
		<u-top-tips ref="uTips" style="top:0"></u-top-tips>
	</view>
</template>

<script>
import citySelect from '../common/u-city-select.vue';
export default {
	components: {
		citySelect
	},
	data() {
		return {
			upload: {
				frontaction: 'http://www.mksoft.cn/zx/front/zhuangxiu/uploadIDCard',
				front: [],
				back:[]
			},
			showcitypickerinput: '',
			showcitypicker: false,
			currentStep: 0,
			tips: '',
			seconds: 60,
			refCode: null,
			startText: '获取验证码',
			changeText: 'X秒重新获取',
			endText: '重新获取',
			isShowA: {
				display: 'block'
			},
			isShowB: {
				display: 'none'
			},
			isShowC: {
				display: 'none'
			},
			isShowD: {
				display: 'none'
			},
			ysxy: {
				name: 'apple',
				checked: false
			},
			aform: {
				phoneNumber: '',
				code: ''
			},
			bform: {
				nickName: '',
				openid: '',
				sex: '',
				avatar: '',
				realname: ''
			},
			cform: {
				province: '',
				city: '',
				district: '',
				address: ''
			},
			serviceItem: [],
			dform: {},
			dform: {},
			arules: {
				phoneNumber: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur']
					},
					{
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ['change', 'blur']
					}
				],
				code: [
					{
						required: true,
						message: '请输入验证码',
						trigger: 'change'
					}
				]
			},
			phoneNum: '',
			numList: [
				{
					name: '账号认证'
				},
				{
					name: '基本信息'
				},
				{
					name: '设置区域'
				},
				{
					name: '设置类目'
				}
			]
		};
	},
	methods: {
		getServiceTypes() {
			uni.request({
				url: 'http://www.mksoft.cn/zx/front/mer/getServiceTypes',
				success: res => {
					if (res.data.code == 200) {
						let arry = res.data.data;
						this.serviceItem = arry.map(function(item, index, arry) {
							let o = {
								text: item.name,
								key: item.id,
								selected: false,
								bgcolor: '#b0b0b0',
								bordercolor: '#b0b0b0'
							};
							return o;
						});
					}
				},
				fail: res => {}
			});
		},
		cityChange(e) {
			this.showcitypickerinput = e.province.label + '-' + e.city.label + '-' + e.area.label;
			this.cform.province = e.province.value;
			this.cform.city = e.city.value;
			this.cform.district = e.area.value;
		},
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if (!this.aform.phoneNumber) {
				this.$refs.uTips.show({
					title: '手机号不能为空',
					type: 'warning',
					duration: '2300'
				});
				return false;
			}
			if (this.$refs.uCode.canGetCode) {
				uni.request({
					url: 'http://www.mksoft.cn/zx/front/ali/sendSms',
					data: {
						phoneNumber: this.aform.phoneNumber
					},
					success: res => {
						if (res.data.code == 200) {
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.showToast({
								title: '验证码已发送',
								icon: 'none',
								duration: 2500
							});
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else {
							this.$refs.uTips.show({
								title: res.data.msg,
								type: 'warning',
								duration: '2300'
							});
						}
					},
					fail: res => {
						this.$refs.uTips.show({
							title: '验证码发送失败',
							type: 'warning',
							duration: '2300'
						});
					}
				});
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},

		checkboxChange(e) {
			console.log(e);
		},
		submitA() {
			// 判断是否勾选隐私协议
			if (!this.ysxy.checked) {
				this.$refs.uTips.show({
					title: "请勾选服务条款",
					type: 'warning',
					duration: '2300'
				});
				return false;
			}
			this.$refs.formA.validate(valid => {
				if (valid) {
					this.$u
						.post('/front/mer/reg', {
							phoneNumber: this.aform.phoneNumber,
							code: this.aform.code,
							wxOpenId: this.bform.openid
						})
						.then(res => {
							if (res.code != 200) {
								this.$refs.uTips.show({
									title: res.msg,
									type: 'warning',
									duration: '2300'
								});
							} else {
								//跳转到下一步
								this.currentStep = 1;
								this.isShowA.display = 'none';
								this.isShowB.display = 'block';
								this.isShowC.display = 'none';
								this.isShowD.display = 'none';
							}
						});
				}
			});
		},
		submitB() {
			console.log(this.upload.front);
			let ffiles = this.$refs.fUpload.lists.filter(val => {
				return val.progress == 100;
			});
			console.log(ffiles);
			 
			if(!ffiles || ffiles.length<1){
				this.$refs.uTips.show({
					title: "请上传身份证正面照",
					type: 'warning',
					duration: '2300'
				});
				return false;
			}
			 
			let bfiles = this.$refs.bUpload.lists.filter(val => {
				return val.progress == 100;
			});
			console.log(bfiles);
			 
			if(!bfiles || bfiles.length<1){
				this.$refs.uTips.show({
					title: "请上传身份证反面照",
					type: 'warning',
					duration: '2300'
				});
				return false;
			}
			this.$u
				.post('/front/mer/reg/updateMerInfo/2', {
					phoneNumber: this.aform.phoneNumber,
					realname: this.bform.realname,
					sex: this.bform.sex,
					nickName: this.bform.nickName,
					avatar: this.bform.avatar,
					wxOpenId: this.bform.openid,
					idFront: ffiles[0].response.data,
					idBack: bfiles[0].response.data
				})
				.then(res => {
					if (res.code == 200) {
						//跳转到下一步
						this.currentStep = 2;
						this.isShowA.display = 'none';
						this.isShowB.display = 'none';
						this.isShowC.display = 'block';
						this.isShowD.display = 'none';
					}
				});
		},
		submitC() {
			this.$u
				.post('/front/mer/reg/updateMerInfo/3', {
					province: this.cform.province,
					city: this.cform.city,
					district: this.cform.district,
					address: this.cform.address
				})
				.then(res => {
					if (res.code == 200) {
						this.currentStep = 3;
						this.isShowA.display = 'none';
						this.isShowB.display = 'none';
						this.isShowC.display = 'none';
						this.isShowD.display = 'block';
					}
				});
		},

		submitD() {
			let tags = '';
			this.serviceItem.forEach(item => {
				if (item.selected) {
					tags += item.key + ',';
				}
			});
			if (tags.length > 0) {
				tags = tags.substr(0, tags.length - 1);
			}
			this.$u
				.post('/front/mer/reg/updateMerInfo/4', {
					tags: tags
				})
				.then(res => {
					if (res.code == 200) {
						this.$Router.push({ path: '/pages/userEnter/userEnter'})
					}
				});
		},
		tagclick(index) {
			if (!this.serviceItem[index].selected) {
				// 选中
				this.serviceItem[index].selected = true;
				this.serviceItem[index].bgcolor = '#FA8513';
			} else {
				// 取消选中
				this.serviceItem[index].selected = false;
				this.serviceItem[index].bgcolor = '#b0b0b0';
			}
			if (this.serviceItem[index].bordercolor == '#b0b0b0') {
				this.serviceItem[index].bordercolor = '#FA8513';
			} else {
				this.serviceItem[index].bordercolor = '#b0b0b0';
			}
		},
		isWechat() {
			return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === 'micromessenger';
		},
		getWxCode() {
			if (this.isWechat()) {
				// 截取地址中的code，如果没有code就去微信授权，如果已经获取到code了就直接把code传给后台获取openId
				window.location.href =
					'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxe283a89e01985b0d' +
					'&redirect_uri=' +
					encodeURIComponent('http://www.mksoft.cn/qlyg/#/pages/wxlogin/jump') +
					'&response_type=code&scope=snsapi_userinfo&state=' +
					encodeURIComponent(this.routePath) +
					'#wechat_redirect';
				// redirect_uri是授权成功后，跳转的url地址，微信会帮我们跳转到该链接，并且通过？的形式拼接code，这里需要用encodeURIComponent对链接进行处理。
				// 如果配置参数一一对应，那么此时已经通过回调地址刷新页面后，你就会再地址栏中看到code了。
				// http://127.0.0.1/pages/views/profile/login/login?code=001BWV4J1lRzz00H4J1J1vRE4J1BWV4q&state=1
			}
		},
		getUrlCode(name) {
			return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null;
		},
		pageJump(){
			// 判断用户是否已经注册,跳转到对应界面
			// 1停用 2申请成为商户，待补全数据 3申请成为商户，待审核 4申请成为商户，提交后审核未通过 0商户用户 5普通用户
			// 1：提示账号已经停用，3：提示待审核 4：提示审核未通过 0：跳转到服务类目设置页面，暂时只有1,3,4,0需要跳转,134跳转到regSuccess页面，0跳转到服务类型配置页
			this.$u
				.get('/front/user/getUserInfo', {})
				.then(res => {
					if (res.code == 200) {
						let bsuser = res.data;
						if(bsuser.status == '1'){
							this.$Router.push({ path: '/pages/userEnter/regSuccess', query: { status: '1' }})
						}else if(bsuser.status == '3'){
							this.$Router.push({ path: '/pages/userEnter/regSuccess', query: { status: '3' }})
						}else if(bsuser.status == '4'){
							this.$Router.push({ path: '/pages/userEnter/regSuccess', query: { status: '4' }})
						}else if(bsuser.status == '0'){
							this.$Router.push({ path: '/pages/userEnter/updateServiceCate', query: { status: '4' }})
						}
						// 查询所有服务分类
						this.getServiceTypes();
						this.bform.avatar = bsuser.avatar;
						this.bform.nickName = bsuser.nickName;
						this.bform.openid = bsuser.wxOpenId;
						this.bform.sex = bsuser.sex;
					}  
				});
		}
	},
	onReady() {
		this.$refs.formA.setRules(this.arules);
	},
	/* onShow() {
		this.pageJump();
	}, */
	onLoad() {
		this.pageJump();
	}
};
</script>
<style lang="scss">
.container {
	padding: 10upx;
}

.content {
	padding: 25upx;
	.contentA {
		.ysxy {
			margin-top: 15upx;
			display: flex;
			justify-content: center;
		}
	}
	.contentD {
		.tags {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			.tag {
				margin-left: 5upx;
				margin-top: 5upx;
			}
		}
	}
	.submit {
		margin-top: 40upx;
	}
}
</style>
